<script setup lang='ts' name="policy-add">
import type { PlusColumn } from 'plus-pro-components'

import { useGetAreaList, useGetAreaListOptions, usePolicyAddOrUpdate, usePolicyShow } from '@fl/api/fit-old-api'
import { SubmitBtn } from '@fl/components'
import FlUpload from '@fl/components/fl-upload.vue'
import { cloneDeep } from 'lodash-es'

const visible = defineModel<boolean>('visible', { required: true })
const id = defineModel<string>('id', { required: true })

const form = ref()
const title = ref('编辑政策')

const initialState = {
    city: '',
    code: '',
    content: '',
    district: '',
    isDeleted: 0,
    level: '',
    province: '',
    sortNo: 0,
    url: '',
}
const state = ref(cloneDeep(initialState))

// 详情
const { data: detail, isLoading: detailLoading, refetch } = usePolicyShow(id)
watchEffect(() => {
    if (detail.value) {
        state.value = cloneDeep(detail.value)
    }
})

// 提交表单
const { isPending, mutate } = usePolicyAddOrUpdate()

// 省市区
const initialParams = {
    code: '',
    level: '',
}
const provinceParams = ref(cloneDeep(initialParams))
const cityParams = ref(cloneDeep(initialParams))
const districtParams = ref(cloneDeep(initialParams))
provinceParams.value = {
    code: '',
    level: '1',
}
cityParams.value = {
    code: '',
    level: '2',
}
districtParams.value = {
    code: '',
    level: '3',
}
const { data: provinceOptions, isLoading: provinceOptionsLoading } = useGetAreaListOptions(provinceParams)
const { data: cityOptions, isLoading: cityOptionsLoading } = useGetAreaListOptions(cityParams)
const { data: districtOptions, isLoading: districtOptionsLoading } = useGetAreaList(districtParams)

const areaLoading = computed(() => {
    return provinceOptionsLoading.value || cityOptionsLoading.value || districtOptionsLoading.value
})
const isLoading = computed(() => {
    if (id.value)
        return detailLoading.value || areaLoading.value
    else
        return areaLoading.value
})

// 提交
async function submit() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const params = { id: id.value ?? '', ...unref(state) }
        console.log('params', params)
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                refetch()
                cancel()
            },
        })
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    form.value?.formInstance.resetFields()
}

const columns: PlusColumn[] = [
    {
        fieldProps: { disabled: true },
        label: '省',
        options: provinceOptions,
        prop: 'province',
        valueType: 'select',
    },
    {
        fieldProps: { disabled: true },
        label: '市',
        options: cityOptions,
        prop: 'city',
        valueType: 'select',
    },
    {
        fieldProps: { disabled: true },
        label: '区',
        options: districtOptions,
        prop: 'district',
        valueType: 'select',
    },
    {
        fieldProps: { min: 0, precision: 0 },
        label: '排序',
        prop: 'sortNo',
        valueType: 'input-number',
    },
    {
        label: '政策文件内容',
        prop: 'url',
    },
    {
        label: '上下架',
        prop: 'isDeleted',
    },
]

const rules = {
    city: [
        {
            message: '请选择市',
            required: true,
        },
    ],
    district: [
        {
            message: '请选择区',
            required: true,
        },
    ],
    province: [
        {
            message: '请选择省',
            required: true,
        },
    ],
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="500"
                close-on-press-escape
                :has-footer="false"
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    animated
                    class="mt-20"
        />

        <template v-else>
            <div class="mt-20">
                <PlusForm ref="form"
                          v-model="state"
                          :columns="columns"
                          :label-width="120"
                          :rules="rules"
                          :has-footer="false"
                          :row-props="{ gutter: 20 }"
                >
                    <template #plus-field-isDeleted>
                        <el-radio-group v-model="state.isDeleted">
                            <el-radio label="正常上架"
                                      :value="0"
                            />

                            <el-radio label="下架"
                                      :value="1"
                            />
                        </el-radio-group>
                    </template>

                    <template #plus-field-url>
                        <FlUpload v-model="state.url"
                                  list-type="text"
                                  accept="*"
                        />
                    </template>
                </plusform>
            </div>

            <div class="mx-auto mt20 flex justify-center">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="submit"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
